<template>
  <div id="app" class="Radar" ref="echart" :style="{width:width,height:height}"></div>
</template>
<script>
export default {
  name: 'Radar',
  data() {
    return {}
  },
  props:{
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
    unit:{
      type:String,
      default:""
    },
    color:{
      type:Array,
      default:()=>[]
    },
    thermal:{
      type:Boolean,
      default:true
    },
    data:{
      type:Array,
      default:()=>[]
    }
  },
  watch:{
    data:{
      handler(val){
        this.getEchart(val);
      },
      deep:true
    }
  },
  mounted() {},

  methods: {
    getEchart(data) {
      let el = this.$refs.echart;
      let mychartOutdoors;
      if(this.$echarts.getInstanceByDom(el)) {
        mychartOutdoors = this.$echarts.getInstanceByDom(el)
      }
      else{
        mychartOutdoors = this.$echarts.init(el)
      }
      var colorScene = ['#009afe', '#fe9100', '#03b38c', '#009afe']
      //红、黄、绿、蓝色
      var DataScene = data;
      var value = []
      var nameInfo = []
      var indicator = []
      var radarData = [] //坐标名称
      var scatterData = []
      let maxNum = DataScene[0].studentCount;
      DataScene.map(function(e, i) {
        // name.push(e.name);
        value.push(e.studentCount)
        nameInfo.push(e.name)
        if( e.studentCount > maxNum ){
          maxNum = e.studentCount
        }
        var cor = colorScene[0]
        indicator.push({
          text: e.name,
          max: maxNum,
          color: '#666'
        })
        scatterData.push({
          value: [e.studentCount, i,e.scale],
          itemStyle: {
            normal: {
              color: cor,
              borderColor: cor,
              borderWidth: 2
            }
          }
        })
      })

      radarData.push({
        value: value
      })
      let _this = this;
      let optionOutdoors = {
        // backgroundColor: '#33333C',
        tooltip: {
          backgroundColor: 'rgba(0,0,0,0.6)',
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          trigger: 'axis',
          formatter: function(params){
            if (params.length > 0) {
              let relVal = params[0].name;
              relVal += '：' +params[0].value[0]+_this.unit + '<br/>' 
              if (_this.thermal) {
                relVal += "欢迎度："+params[0].value[2] + "%"
              }
              return relVal
            } 
          },
        },
        radar: [
          {
            indicator: indicator,
            name: {
              show: true,
              textStyle: {
                fontSize: 12,
                padding: [-6, -12]
              }
            },
            center: ['50%', '50%'],
            top: '10%',
            radius: '80%',
            shape: 'circle',
            scale: true,
            axisLine: {
              lineStyle: {
                color: '#ddd'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#ddd'
              }
            },
            axisTick: {
              show: true,
              length: 6,
              lineStyle: {
                color: 'rgba(255,255,255,0.8)'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(255, 255, 255, .5)', 'rgba(255, 255, 255, .7)', 'rgba(255, 255, 255, .85)']
              }
              // areaStyle: {
              //     color: ["transparent"]
              // }
            }
          }
        ],
        polar: {
          radius: '80%'
        },
        angleAxis: {
          type: 'category',
          data: nameInfo,
          boundaryGap: false,
          clockwise: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          min:0,
          max:maxNum,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#bfbfbe'
          }
        },
        series: [
          {
            name: '',
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            symbol: 'none',
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: '#fff',
                borderColor: '#009afe',
                borderWidth: 2
              }
            },
            lineStyle: {
              color: '#ddd',
              width: 2
            },
            areaStyle: {
              opacity: 1,
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 1,
                    color: _this.color[0]
                  },
                  {
                    offset: 0,
                    color: _this.color[1]
                  }
                ],
                false
              ),
              type: 'default'
            },
            data: radarData
          },
          {
            name: '',
            type: 'scatter',
            coordinateSystem: 'polar',
            symbolSize: 4,
            data: scatterData
          }
        ]
      }
      mychartOutdoors.setOption(optionOutdoors);
      window.addEventListener("resize", ()=>{
        mychartOutdoors && mychartOutdoors.resize();
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
